<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!--方法获取需要() method会渲染三次，而computed只渲染一次（computed缓存，更加高效）-->
  <h1 >{{ getMessage() }}</h1>
  <h1 >{{ getMessage() }}</h1>
  <h1 >{{ getMessage() }}</h1>
  <h2>{{getPoll}}</h2>
  <h2>{{getPoll}}</h2>
  <h2>{{getPoll}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
      el: '#app',
      data: {
        message: "你好",
      },
      methods: {
        getMessage () {
          console.log("method执行")
          return this.message
        }
      },
      computed: {
        getPoll () {
          console.log("computed执行")
          return this.message
        }
      }
    })
</script>

</body>
</html>
